<template>
  <div class="material">
        <div class="head">
        <div class="emptyTop"></div>
        <div class="header">
        <!-- 两端对齐 -->
        <van-row class="headerAll" type="flex" justify="space-between" align="center">
            <van-col class="leftImg" @click="goBack()">
            <img src="http://job.dayinyun.com/back.png" alt="">
            </van-col>
            <van-col span="22">
            <van-search v-model="value" placeholder="请输入搜索关键词" />
            </van-col>

        </van-row>
        </div>
    </div>
    <div class="content">
        <ul class="tabdiv">
            <li :class="{'active':type==1}" @click="tabchange(1)">视频背景</li>
            <li :class="{'active':type==2}" @click="tabchange(2)">图片背景</li>
        </ul>
        <div class="list">
             <van-list
            v-model="loading"
            :finished="finished"
            :offset="20"
            :immediate-check="false"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="listitemadd" @click="edit()">
                <img src="../../assets/images/add.png"/>
                <label>添加</label>
            </div>

            <div class="listitem" v-for="(item,index) in list" :key="index" @click.stop="details(item)">
                   <div class="imgdiv">
                       <img :src="item.cover" class="beijin"/>
                       <img @click.stop="edit(item)" src="../../assets/images/edit.png" class="edit"/>
                   </div>
                   <div class="option">
                       <label>{{item.money}}</label>
                       <img @click.stop="del(item)" src="../../assets/images/del.png"/>
                    </div>
                    <div class="title">
                        {{item.name}}
                    </div>
            </div>

             </van-list>
        </div>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader";
  import {MATERIALLIST,MATERIALREMOVE} from "../../apis/mine";
  export default {
    name:"myTool",
    components:{
      commonHeader
    },
    data() {
      return {
        search:true,
        type:1,   //tab类型 1是视频 2是图片
        value:"",
        page:1,
        loading:false,
        finished:false,
        limit:10,
        list:[]


      }
    },
    methods:{
      // 返回
      goBack(){
        if (window.history.length>1){
          window.history.go(-1)
        }else {
          if (this.$systemInfo() === "android") {
            window.android.closeCurrentPage();
          } else if (this.$systemInfo() === "ios") {
            window.webkit.messageHandlers.closeCurrentPage.postMessage(null);
          }
        }
      },
      // 切换tab
      tabchange(type){
          var that=this;
          that.list=[];
          that.type=type;
          that.page=1;
          that.loading=false;
          that.finished=false;
          that.getlist();
      },
      getlist(){
        let materiallist=MATERIALLIST;
        let that=this;
        var data={
            type:that.type==1?"video":"picture",
            page:that.page,
            limit:that.limit,
            keyword:that.value,
        }
        materiallist(data).then(res=>{
            if(res.data.code==200)
            {

                that.loading=false;

                if(res.data.data.data.length<that.limit){
                   that.finished=true;
                }
                that.list=that.list.concat(res.data.data.data);
            }
            else
            {
                that.finished=true;
                that.loading=false;
            }
        })
      },
      onLoad(){
            this.page++;
            this.getlist();
      },
      // 详情页
      details(item){
        this.$router.push({
          name:'materialdetail',
          query:{
            id:item?item.id:''
          }
        })
      },
      // 编辑
      edit(item){
        this.$router.push({
          name:'addmaterial',
          query:{
            id:item?item.id:'',
            type:this.type,
          }
        })
      },
      // 删除
      del(item){
        let materialremove=MATERIALREMOVE;
        let that=this;
        materialremove({id:item.id}).then(res=>{
            if(res.data.code==200){
                var list=that.list;
                 for(var i=0;i<list.length;i++)
                 {
                     if(list[i].id==item.id)
                     {
                         list.splice(i,1); 
                     }
                 }
            }
           
        })
      }
    },
    created(){
        this.getlist();
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .material{
        width:100%;
        padding-top:1.38rem ;
        box-sizing: border-box;
        .head{
            width:100%;
            height:1.38rem;
            position: fixed;
            top:0;
            left:0;
            right:0;
            z-index:100;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            .emptyTop{
            width:100%;
            height:0.5rem;
            background: #000000;
            }
            .header{
            width:100%;
            height:0.98rem;
            padding: 0 0.3rem ;
            box-sizing: border-box;
            background: #000000;
            border-bottom: 0.02rem solid rgba(102,102,102,0.4);
            margin-top:-0.02rem;
            .headerAll{
                width:100%;
                height:0.88rem;
                /deep/ .van-search
                {
                padding: 0;
                background: #232323;
                }
                /deep/ .van-search__content
                {
                    background-color: #232323;
                }
                /deep/.van-icon
                {
                    font-size: 0.4rem !important;
                    color: #999999;
                }
                /deep/.van-field__control
                {
                    font-size: 0.28rem;
                    color: rgba(255,255,255,0.3);
                }
                .leftImg{
                height:0.28rem;
                img{
                    width:0.28rem;
                    height:0.28rem;
                }
                }
                .centerTitle{
                font-size:@fontSize40;
                font-family:@fontFamily400;
                font-weight:@fontWeight500;
                line-height:0.4rem;
                color:#FFFFFF;
                }
                .rightTitle{
                font-size:@fontSize28;
                font-family:@fontFamily400;
                font-weight:@fontWeight400;
                line-height:0.4rem;
                color:#FFFFFF;
                }
              }
            }
        }
        .content{
            width:100%;
            box-sizing: border-box;
            .tabdiv
            {
                width: 100%;
                height: 0.86rem;
                display: flex;
                position: fixed;
                top: 1.38rem;
                z-index: 999;
                li{
                    width: 50%;
                    background: #232323;
                    color: #ffffff;
                    text-align: center;
                    font-size: 0.34rem;
                     display: flex;
                    justify-content: center;
                    align-items: center;


                }
                .active{
                    background: #FEA300;
                }
            }
            .list
            {
                width: 7.08rem;
                display: flex;
                // justify-content: center;
                // align-items: center;
                flex-wrap: wrap;
            //     column-gap: 0;
            //    column-count: 2;
                margin: 0 auto;
                padding: 0.98rem 0;
                .listitemadd{
                    width: 3.36rem;
                    height: 2.44rem;
                    background: #232323;
                    border-radius: 0.1rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 0.3rem;
                    overflow: hidden;
                     margin-left:0.15rem;
                    img{
                        display: block;
                        width: 0.38rem;
                        height: 0.84rem;
                    }
                    label{
                        font-size:0.28rem;
                        color: #ffffff;
                    }
                }
                /deep/.van-list{
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                }
                /deep/.van-list__finished-text
                {
                    width: 100%;
                }
                /deep/.van-list__loading{
                    width: 100%;
                }
                .listitem{
                     margin-top: 0.3rem;
                     margin-left:0.15rem;
                     width: 3.36rem;
                     .imgdiv
                     {
                         width: 3.34rem;
                         height: 2.20rem;
                         position: relative;
                         .beijin{
                            //  max-height: 100%;
                            //  max-width: 100%;
                             width: 3.34rem;
                             height: 2.20rem;
                             border-radius: 0.1rem;
                             object-fit: cover;
                         }
                         .edit{
                             width: 0.96rem;
                             height: 0.96rem;
                             display: block;
                             position: absolute;
                             top: 0;
                             right: 0;
                         }
                     }
                     .option
                     {
                         display: flex;
                         justify-content: space-between;
                         width: 3.34rem;
                         margin-top: 0.2rem;
                         label{
                             font-size: 0.28rem;
                             color:#FC0B1C ;
                         }
                         img{
                            width: 0.3rem;
                            height: 0.3rem;
                         }
                     }
                     .title{
                         font-size: 0.34rem;
                         color: #ffffff;
                     }

                }


            }


        }
  }

</style>
